<template>
  <div class="login">
    <div class="opc">
        <span  @click="()=>{this.$router.go(-1)}"  class="return"><img src="../../public/img/return.png" alt="" width="20px" height="20px"></span>
         <!-- <router-link :to="path.ret" ><span class="return"><img src="../../public/img/return.png" alt="" width="20px" height="20px"></span></router-link> -->
         <keep-alive  include="is_flag">
            <!-- <router-link :to="path.ret" ><span class="return"><img src="../../public/img/return.png" alt="" width="20px" height="20px"></span></router-link> -->
         </keep-alive>
    </div>
    <div>
      <div class="bgc">
        <img src="img/timg_11.jpg" alt="" width="100%" height="100%" />
      </div>
      <div v-show="is_show">
          <div class="denglu">
        <!-- <form action="" method=""> -->
          <p>
             <span class="title_1 my" >由字母a～z(不区分大小写)、数字0～9组成 </span>
            <span class="sanjiao my" ></span>
            <input type="text" placeholder="账户" v-model="username" @focus="nam1()"/>
            <span class="title_2">{{msg1}}</span>
            <i class="iconfont iconuser"></i>
          </p>
          <p>
             <span class="title_3 my2" >由数字0～9组成 </span>
            <span class="sanjiao my2" ></span>
            <input type="password" placeholder="密码" v-model="pwd"  @blur="pwdd"  @focus="pwdd1()"/>
            <i class="iconfont iconmima"></i>
            <span class="title_4">{{msg2}}</span>
          </p>
          <p class="xx"><input type="submit" value="登录"  @click="login()" /></p>
          <p class="xxx"><span @click="cli()">注册账号</span><span @click="cli()">忘记密码?</span></p>
          <!-- <p class="xxx"><span>注册账号</span><span>忘记密码?</span></p> -->
        <!-- </form> -->
      </div>
      <div class="qita">
        <div><i class="iconfont iconqq"></i></div>
        <div><i class="iconfont iconxinlang"></i></div>
        <div><i class="iconfont iconweixin"></i></div>
        <input type="submit" value="其他登录方式" />
      </div>
      </div>

      <!-- 注册 -->
      <div v-show="is_flag">
          <div class="denglu zhuce">
        <!-- <form action="" method=""> -->
          <p>
            <span class="title_1 my" >由字母a～z(不区分大小写)、数字0～9组成 </span>
            <span class="sanjiao my" ></span>
            <input type="text" placeholder="账户"  v-model="username" @blur="nam()"  @focus="nam1()"/>
            <span class="title_2">{{msg1}}</span>
            <i class="iconfont iconuser"></i>
          </p>
          <p>
            <span class="title_3 my1" >由11位数字组成组成 </span>
            <span class="sanjiao my1" ></span>
            <input type="number" name="phone" placeholder="手机号" title="123" v-model="phone" @blur="pho()"  @focus="pho1()"/>
            <span class="title">{{msg}}</span>
            <i class="iconfont icondianhua"></i>
          </p>
          <p>
             <span class="title_3 my2" >由数字0～9组成 </span>
            <span class="sanjiao my2" ></span>
            <input type="password" placeholder="密码" v-model="pwd" @blur="pwdd"  @focus="pwdd1()"/>
            <i class="iconfont iconmima"></i>
            <span class="title_4">{{msg2}}</span>
          </p>
          <p class="xxx" ><input type="submit" value="注册" style="marin-left:0px;" @click="reg()"/></p>
          <!-- <p class="xxx"><span @click="cli()">注册账号</span><span @click="cli()">忘记密码?</span></p> -->
          <!-- <p class="xxx"><span>注册账号</span><span>忘记密码?</span></p> -->
        <!-- </form> -->
      </div>
      </div>
    </div>
     <!-- 模态框 -->
  <div id="myModal">
   <div> <img src="img/check2.png" alt="" width="50px"></div>
   <div> {{ msgg}}</div>
  </div>
  </div>
</template>

<style lang="less" scoped>
// 模态框
#myModal{
      width: 240px;
    height: 100px;
    background-color: #cccccccc;
    position: fixed;
    top: 36%;
    left: 20%;
    /* border-right: 15px; */
    border-radius: 22px;
    font-size: 23px;
    justify-content: space-around;
    display: none;
    text-align: center;
    padding-top: 10px;
}
.login {
  position: absolute;
  background: url(../../public/img/timg_10.jpg);
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // background-color: red;
  overflow: hidden;
  .return{
      float: left;
      margin: 15px;
  }
}

.opc {
  width: 100%;
  height: 100%;
  //   background-color: rgba(0,0,0, 0.281);
  background: linear-gradient(
    to top,
    rgba(214, 97, 62, 0.281) 65%,
    rgba(34, 32, 139, 0.281)
  );
  z-index: 1;
}
.bgc img {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  top: 16%;
  left: 50%;
  margin-left: -80px;
  border: 5px solid #4c1d3a30;
}
.denglu {
  position: absolute;
  width: 100%;
  top: 44%;
  left: 0%;
  p {
    width: 100%;
    text-align: center;
    position: relative;
    input {
      width: 60%;
      height: 35px;
      padding-left: 38px;
      outline: none;
      border-radius: 20px;
      border: 1px solid #cccccc;
    }
    input:last-child {
      width: 112px;
      background-color: #a75656;
      color: #ffffff;
      font-size: 14px;
      margin-left: 106px;
      display: inline-flex;
    }
    .title{
      position: absolute;
      top: 37px;
      right: 87px;
      font-size: 17px;
      color: #3a54d8;
      font-weight: blod;
      font-weight: bold;
    }
    .sanjiao{
      width: 0px;
      height: 0px;
      display: none;
      border: 10px solid transparent;
      border-top-color: #ffffff;
      opacity: 0.6;
      position: absolute;
      top: -8px;
      left: 124px;
    }
    .title_1{
         position: absolute;
    display: none;
    width: 128px;
    height: 35px;
    line-height: 16px;
    background-color: #ffffff;
    opacity: 0.6;
    top: -43px;
    left: 16px;
    font-size: 8px;
    color: #000000;
    }
    .title_2{
      position: absolute;
      top: 37px;
      right: 87px;
      font-size: 17px;
      color: #3a54d8;
      font-weight: blod;
      font-weight: bold;
    }
    .title_3{
         position: absolute;
    display: none;
    width: 128px;
    height: 25px;
    line-height: 25px;
    background-color: #ffffff;
    opacity: 0.6;
    top: -33px;
    left: 16px;
    font-size: 8px;
    color: #000000;
    }
    .title_4{
       position: absolute;
      top: 38px;
      right: 87px;
      font-size: 17px;
      color: #3a54d8;
      font-weight: blod;
      font-weight: bold;
    }
    i {
      position: absolute;
      top: 7px;
      left: 88px;
    }
  }
}
.xx {
  margin-bottom: 10px;
}
.xxx {
  font-size: 14px;
  margin-left: 41px;
  span {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    border-right: 1px solid #9b7f7f;
  }
}
.xxx span:nth-child(1) {
  padding-right: 5px;
}
.xxx span:nth-child(2) {
  border: none;
  margin-left: 5px;
}
.qita {
  position: absolute;
  width: 100%;
  top: 81%;
  display: inline-flex;
  padding-left: 80px;
  div {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ffffff;
    border-radius: 50%;
    margin-right: 6px;
    margin-top: 3px;
    i {
      font-size: 18px;
      color: #ffffff;
    }
  }
  img {
    margin-right: 5px;
  }
  input {
    width: 112px;
    background-color: #a75656;
    color: #ffffff;
    font-size: 14px;
    height: 35px;
    outline: none;
    border-radius: 20px;
    border: 1px solid #cccccc;
  }
}
.zhuce p input:last-child{
    margin: 0;
}
.icondianhua{
    left: 84px !important;
    font-size: 21px;
    top: 5px !important;
}
</style>

<script>
export default {
  data() {
    return {
        path:{
            ret:'/Home'
        },
        is_show:true,
        is_flag:false,
        number:'',
        title:'',
        person:'',
        username:'',
        phone:'',
        pwd:'',
        msg:'',
        msgg:'',
        msg1:'',
        msg2:'',
    }
  },
  methods:{
      cli(){
        this.is_show=!this.is_show;
        this.is_flag=!this.is_flag;
      },
      //账号
        nam(){
            let a=/^[a-zA-Z0-9]{6,10}$/;
            if(this.username==''){
                this.msg1="用户名不能为空";
                // this.flag=false;
            }else if(!a.test(this.username)){
                this.msg1="用户名错误";
            }else{
              for(var i=0;i<this.person.length;i++){
                console.log(this.person[i].name);
                if(this.username==this.person[i].name){
                   return this.msg1="用户名已存在"
                }else{
                  this.msg1="";
                }
              }
                
            }   
            return this.username;         
        },
        nam1(){
          $(".my").fadeIn(500,);
                  setTimeout(() => {
                    $(".my").fadeOut(500);
                  }, 2000);
        },
     //手机号
        pho(){
            // console.log(this.phone);
            let b=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            if(this.phone==''){
                 this.msg="手机号不能为空";
            }else if(!b.test(this.phone)){
                this.msg="手机号输入错误";
            }else{
              for(var i=0;i<this.person.length;i++){
                console.log(this.person[i].phone);
                console.log(this.phone);
                if(Number(this.phone)==this.person[i].phone){
                  this.msg="手机号已存在"
                }else{
                  this.msg="";
                }
            }
            } 
            return this.phone;
        },
        pho1(){
            $(".my1").fadeIn(500,);
                  setTimeout(() => {
                    $(".my1").fadeOut(500);
                  }, 2000);
        },
        //密码
        pwdd(){
            console.log(this.pwd);
            let c=/^[0-9]{6}$/;
            if(this.pwd==''){
                this.msg2="密码不能为空";
            }else if(!c.test(this.pwd)){
                this.msg2="密码格式错误";
            }else{
                this.msg2='';
            }
            return this.pwd;

        },
        pwdd1(){
            $(".my2").fadeIn(500,);
                  setTimeout(() => {
                    $(".my2").fadeOut(500);
                  }, 2000);
        },
        // 注册信息
        reg(){
          this.$axios.post("http://47.114.130.21:3003/Login",{name:this.username,psd:this.pwd,phone:this.phone,list:'',amount:'',address:''})
    .then((data)=>{
        console.log(data);
    }).catch(error => console.log(error))
        },
        // 点击登录
        login(){
          for(var i=0;i<this.person.length;i++){
            
              if(this.username==this.person[i].name){
                if(this.pwd==this.person[i].psd){
                  this.$store.state.username=this.username;
                  console.log(this.$store.state.username);
                  localStorage.setItem('personMsg',JSON.stringify(this.person[i]));
                  this.msgg='登录成功！'
                  $("#myModal").fadeIn(500,);
                  setTimeout(() => {
                    $("#myModal").fadeOut(500);
                    this.$router.push({ path:'/Home'})
                  }, 1000);
                   
                  return console.log("666")
                }else if(this.pwd!==this.person[i].psd){
                  console.log(123);
                   this.msgg='密码错误！'
                  $("#myModal").fadeIn(500,);
                  setTimeout(() => {
                    $("#myModal").fadeOut(500);
                  }, 1000);
                   return console.log("666")
                }
               
              }
          }
          if(i==this.person.length){
                console.log(1234);
                  this.msgg='用户名错误或不存在！'
                  $("#myModal").fadeIn(500,);
                  setTimeout(() => {
                    $("#myModal").fadeOut(500);
                  }, 1000);
                   return console.log("666")
              }
        }
  },
  mounted(){
    console.log(123);
    this.$axios.get("http://47.114.130.21:3003/Login").then((data) => {
      // this.person=data;
      console.log(data);
      this.person=data.data;
      console.log(this.person);
      
      // this.person = data.data.user;
      // console.log(this.person);
      // this.lunbo = data.data.lunbo;
    });
  }
};
</script>